﻿window.onload = function () {
    var paper = Raphael("holder");

    //var curve = paper.ellipse(100, 100, 1, 1).attr({"stroke-width": 0, fill: Color.red});

    var text = "Betty Botter bought some butter but, she said, the butter's bitter. If I put it in my batter, it will make my batter bitter. But a bit of better butter will make my batter better. So, she bought a bit of butter, better than her bitter butter, and she put it in her batter, and the batter was not bitter. It was better Betty Botter bought a bit better butter.";
    var font = {
        font: "11px Arial",
        "font-style": "italic",
        opacity: 1,
        "fill": LABEL_COLOR,
        stroke: LABEL_COLOR,
        "stroke-width": .3
    };
    var font = {font: "11px Arial", opacity: 1, "fill": LABEL_COLOR};
    var boxWidth = 100

    var AttributedStringIterator = function (text) {
        //this.text = this.rtrim(this.ltrim(text));
        text = text.replace(/(\s)+/, " ");
        this.text = this.rtrim(text);
        /*
        if (beginIndex < 0 || beginIndex > endIndex || endIndex > length()) {
            throw new IllegalArgumentException("Invalid substring range");
        }
        */
        this.beginIndex = 0;
        this.endIndex = this.text.length;
        this.currentIndex = this.beginIndex;

        //console.group("[AttributedStringIterator]");
        var i = 0;
        var string = this.text;
        var fullPos = 0;

        //console.log("string: \"" + string + "\", length: " + string.length);
        this.startWordOffsets = [];
        this.startWordOffsets.push(fullPos);

        // TODO: remove i 1000
        while (i < 1000) {
            var pos = string.search(/[ \t\n\f-\.\,]/);
            if (pos == -1)
                break;

            // whitespace start
            fullPos += pos;
            string = string.substr(pos);
            ////console.log("fullPos: " + fullPos + ", pos: " + pos +  ", string: ", string);

            // remove whitespaces
            var pos = string.search(/[^ \t\n\f-\.\,]/);
            if (pos == -1)
                break;

            // whitespace end
            fullPos += pos;
            string = string.substr(pos);

            ////console.log("fullPos: " + fullPos);
            this.startWordOffsets.push(fullPos);

            i++;
        }
        //console.log("startWordOffsets: ", this.startWordOffsets);
        //console.groupEnd();
    };
    AttributedStringIterator.prototype = {
        getEndIndex: function (pos) {
            if (typeof (pos) == "undefined")
                return this.endIndex;

            var string = this.text.substr(pos, this.endIndex - pos);

            var posEndOfLine = string.search(/[\n]/);
            if (posEndOfLine == -1)
                return this.endIndex;
            else
                return pos + posEndOfLine;
        },
        getBeginIndex: function () {
            return this.beginIndex;
        },
        isWhitespace: function (pos) {
            var str = this.text[pos];
            var whitespaceChars = " \t\n\f";

            return (whitespaceChars.indexOf(str) != -1);
        },
        isNewLine: function (pos) {
            var str = this.text[pos];
            var whitespaceChars = "\n";

            return (whitespaceChars.indexOf(str) != -1);
        },
        preceding: function (pos) {
            //console.group("[AttributedStringIterator.preceding]");
            for (var i in this.startWordOffsets) {
                var startWordOffset = this.startWordOffsets[i];
                if (pos < startWordOffset && i > 0) {
                    //console.log("startWordOffset: " + this.startWordOffsets[i-1]);
                    //console.groupEnd();
                    return this.startWordOffsets[i - 1];
                }
            }
            //console.log("pos: " + pos);
            //console.groupEnd();
            return this.startWordOffsets[i];
        },
        following: function (pos) {
            //console.group("[AttributedStringIterator.following]");
            for (var i in this.startWordOffsets) {
                var startWordOffset = this.startWordOffsets[i];
                if (pos < startWordOffset && i > 0) {
                    //console.log("startWordOffset: " + this.startWordOffsets[i]);
                    //console.groupEnd();
                    return this.startWordOffsets[i];
                }
            }
            //console.log("pos: " + pos);
            //console.groupEnd();
            return this.startWordOffsets[i];
        },
        ltrim: function (str) {
            var patt2 = /^\s+/g;
            return str.replace(patt2, "");
        },
        rtrim: function (str) {
            var patt2 = /\s+$/g;
            return str.replace(patt2, "");
        },
        getLayout: function (start, limit) {
            return this.text.substr(start, limit - start);
        },
        getCharAtPos: function (pos) {
            return this.text[pos];
        }
    };

    /*
    var TextMeasurer = function(paper, text, fontAttrs){
        this.text = text;
        this.paper = paper;
        this.fontAttrs = fontAttrs;

        this.fStart = this.text.getBeginIndex();

    };
    TextMeasurer.prototype = {
        getLineBreakIndex: function(start, maxAdvance){
            var localStart = start - this.fStart;
        },
        getLayout: function(){
        }
    }
    */


    var LineBreakMeasurer = function (paper, text, fontAttrs) {
        this.paper = paper;
        this.text = new AttributedStringIterator(text);
        this.fontAttrs = fontAttrs;

        if (this.text.getEndIndex() - this.text.getBeginIndex() < 1) {
            throw {message: "Text must contain at least one character.", code: "IllegalArgumentException"};
        }

        //this.measurer = new TextMeasurer(paper, this.text, this.fontAttrs);
        this.limit = this.text.getEndIndex();
        this.pos = this.start = this.text.getBeginIndex();

        this.rafaelTextObject = this.paper.text(100, 100, this.text.text).attr(fontAttrs).attr("text-anchor", "start");
        this.svgTextObject = this.rafaelTextObject[0];
    };
    LineBreakMeasurer.prototype = {
        nextOffset: function (wrappingWidth, offsetLimit, requireNextWord) {
            //console.group("[nextOffset]");
            var nextOffset = this.pos;
            if (this.pos < this.limit) {
                if (offsetLimit <= this.pos) {
                    throw {message: "offsetLimit must be after current position", code: "IllegalArgumentException"};
                }

                var charAtMaxAdvance = this.getLineBreakIndex(this.pos, wrappingWidth);
                //charAtMaxAdvance --;
                //console.log("charAtMaxAdvance:", charAtMaxAdvance, ", [" + this.text.getCharAtPos(charAtMaxAdvance) + "]");

                if (charAtMaxAdvance == this.limit) {
                    nextOffset = this.limit;
                    //console.log("charAtMaxAdvance == this.limit");
                } else if (this.text.isNewLine(charAtMaxAdvance)) {
                    console.log("isNewLine");
                    nextOffset = charAtMaxAdvance + 1;
                } else if (this.text.isWhitespace(charAtMaxAdvance)) {
                    // TODO: find next noSpaceChar
                    //return nextOffset;
                    nextOffset = this.text.following(charAtMaxAdvance);
                } else {
                    // Break is in a word;  back up to previous break.
                    /*
                    var testPos = charAtMaxAdvance + 1;
                    if (testPos == this.limit) {
                        console.error("hbz...");
                    } else {
                        nextOffset = this.text.preceding(charAtMaxAdvance);
                    }
                    */
                    nextOffset = this.text.preceding(charAtMaxAdvance);

                    if (nextOffset <= this.pos) {
                        nextOffset = Math.max(this.pos + 1, charAtMaxAdvance);
                    }
                }
            }
            if (nextOffset > offsetLimit) {
                nextOffset = offsetLimit;
            }
            //console.log("nextOffset: " + nextOffset);
            //console.groupEnd();
            return nextOffset;
        },
        nextLayout: function (wrappingWidth) {
            //console.groupCollapsed("[nextLayout]");
            if (this.pos < this.limit) {
                var requireNextWord = false;
                var layoutLimit = this.nextOffset(wrappingWidth, this.limit, requireNextWord);
                //console.log("layoutLimit:", layoutLimit);
                if (layoutLimit == this.pos) {
                    //console.groupEnd();
                    return null;
                }
                var result = this.text.getLayout(this.pos, layoutLimit);
                //console.log("layout: \"" + result + "\"");

                // remove end of line

                //var posEndOfLine = this.text.getEndIndex(this.pos);
                //if (posEndOfLine < result.length)
                //	result = result.substr(0, posEndOfLine);

                this.pos = layoutLimit;

                //console.groupEnd();
                return result;
            } else {
                //console.groupEnd();
                return null;
            }
        },
        getLineBreakIndex: function (pos, wrappingWidth) {
            //console.group("[getLineBreakIndex]");
            //console.log("pos:"+pos + ", text: \""+ this.text.text.replace(/\n/g, "_").substr(pos, 1) + "\"");

            var bb = this.rafaelTextObject.getBBox();

            var charNum = -1;
            try {
                var svgPoint = this.svgTextObject.getStartPositionOfChar(pos);
                //var dot = this.paper.ellipse(svgPoint.x, svgPoint.y, 1, 1).attr({"stroke-width": 0, fill: Color.blue});
                svgPoint.x = svgPoint.x + wrappingWidth;
                //svgPoint.y = bb.y;
                //console.log("svgPoint:", svgPoint);

                //var dot = this.paper.ellipse(svgPoint.x, svgPoint.y, 1, 1).attr({"stroke-width": 0, fill: Color.red});

                charNum = this.svgTextObject.getCharNumAtPosition(svgPoint);
            } catch (e) {
                console.warn("getStartPositionOfChar error, pos:" + pos);
                /*
                var testPos = pos + 1;
                if (testPos < this.limit) {
                    return testPos
                }
                */
            }
            //console.log("charNum:", charNum);
            if (charNum == -1) {
                //console.groupEnd();
                return this.text.getEndIndex(pos);
            } else {
                // When case there is new line between pos and charnum then use this new line
                var newLineIndex = this.text.getEndIndex(pos);
                if (newLineIndex < charNum) {
                    console.log("newLineIndex <= charNum, newLineIndex:" + newLineIndex + ", charNum:" + charNum, "\"" + this.text.text.substr(newLineIndex + 1).replace(/\n/g, "↵") + "\"");
                    //console.groupEnd();

                    return newLineIndex;
                }

                //var charAtMaxAdvance  = this.text.text.substring(charNum, charNum + 1);
                var charAtMaxAdvance = this.text.getCharAtPos(charNum);
                //console.log("!!charAtMaxAdvance: " + charAtMaxAdvance);
                //console.groupEnd();
                return charNum;
            }
        },
        getPosition: function () {
            return this.pos;
        }
    };


    // ******
    function drawMultilineText(text, x, y, boxWidth, boxHeight, options) {
        var TEXT_PADDING = 3;
        var width = boxWidth - (2 * TEXT_PADDING);
        if (boxHeight)
            var height = boxHeight - (2 * TEXT_PADDING);

        var layouts = [];

        var measurer = new LineBreakMeasurer(paper, text, font);
        var lineHeight = measurer.rafaelTextObject.getBBox().height;
        console.log("text: ", text.replace(/\n/g, "↵"));

        if (height) {
            var availableLinesCount = parseInt(height / lineHeight);
            console.log("availableLinesCount: " + availableLinesCount);
        }

        var i = 1;
        while (measurer.getPosition() < measurer.text.getEndIndex()) {
            var layout = measurer.nextLayout(width);
            //console.log("LAYOUT: " + layout + ", getPosition: " + measurer.getPosition());

            if (layout != null) {
                if (!availableLinesCount || i < availableLinesCount) {
                    layouts.push(layout);
                } else {
                    layouts.push(fitTextToWidth(layout + "...", boxWidth));
                    break;
                }
            }
            i++;
        }
        ;
        console.log(layouts);

        measurer.rafaelTextObject.attr({"text": layouts.join("\n")});
        //measurer.rafaelTextObject.attr({"text-anchor": "end"});
        //measurer.rafaelTextObject.attr({"text-anchor": "middle"});
        if (options)
            measurer.rafaelTextObject.attr({"text-anchor": options["text-anchor"]});

        var bb = measurer.rafaelTextObject.getBBox();
        //measurer.rafaelTextObject.attr({"x": x + boxWidth/2});
        if (options["vertical-align"] == "top")
            measurer.rafaelTextObject.attr({"y": y + bb.height / 2 + TEXT_PADDING});
        else
            measurer.rafaelTextObject.attr({"y": y + height / 2});
        //var bb = measurer.rafaelTextObject.getBBox();

        if (measurer.rafaelTextObject.attr("text-anchor") == "middle")
            measurer.rafaelTextObject.attr("x", x + boxWidth / 2 + TEXT_PADDING / 2);
        else if (measurer.rafaelTextObject.attr("text-anchor") == "end")
            measurer.rafaelTextObject.attr("x", x + boxWidth + TEXT_PADDING / 2);
        else
            measurer.rafaelTextObject.attr("x", x + boxWidth / 2 - bb.width / 2 + TEXT_PADDING / 2);

        var boxStyle = {stroke: Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- "};
        /*
        var box = paper.rect(x+.0 + boxWidth/2 - bb.width/2+ TEXT_PADDING/2, y + .5 + boxHeight/2 - bb.height/2, width, height).attr(boxStyle);
        box.attr("height", bb.height);
        */
        //var box = paper.rect(bb.x - .5 + bb.width/2 + TEXT_PADDING, bb.y + bb.height/2, bb.width, bb.height).attr(boxStyle);

        var textAreaCX = x + boxWidth / 2;
        var textAreaCY = y + height / 2;
        var dotLeftTop = paper.ellipse(x, y, 3, 3).attr({
            "stroke-width": 0,
            fill: Color.LightSteelBlue,
            stroke: "none"
        });
        var dotCenter = paper.ellipse(textAreaCX, textAreaCY, 3, 3).attr({fill: Color.LightSteelBlue2, stroke: "none"});

        /*
        // real bbox
        var bb = measurer.rafaelTextObject.getBBox();
        var rect = paper.rect(bb.x+.5, bb.y + .5, bb.width, bb.height).attr({"stroke-width": 1});
        */
        var boxStyle = {stroke: Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- "};
        var rect = paper.rect(x + .5, y + .5, boxWidth, boxHeight).attr(boxStyle);
    }


    /*
    for (var i=0; i<1; i++) {
        var t = text;
        //var t = "Высококвалифицирова";

        var text = paper.text(300, 100, t).attr(font).attr("text-anchor", "start");
        var bbText = text.getBBox();
        paper.rect(300+.5, 100 + .5, bbText.width, bbText.height).attr({"stroke-width": 1});
        console.log("t: ", t.replace(/\n/g, "↵"));

        while (measurer.getPosition() < measurer.text.getEndIndex()) {
            var layout = measurer.nextLayout(width);
            //console.log("LAYOUT: " + layout + ", getPosition: " + measurer.getPosition());
            if (layout != null)
                layouts.push(layout);
        };

        measurer.rafaelTextObject.attr("text", layouts.join("\n"));
        var bb = measurer.rafaelTextObject.getBBox();
        var rect = paper.rect(bb.x+.5, bb.y + .5, bb.width, bb.height).attr({"stroke-width": 1});

        lay.push(layouts);
        console.log(layouts);
    }
    */


    var fitTextToWidth = function (original, width) {
        var text = original;

        // TODO: move attr on parameters
        var attr = {font: "11px Arial", opacity: 0};

        // remove length for "..."
        var dots = paper.text(0, 0, "...").attr(attr).hide();
        var dotsBB = dots.getBBox();

        var maxWidth = width - dotsBB.width;

        var textElement = paper.text(0, 0, text).attr(attr).hide();
        var bb = textElement.getBBox();

        // it's a little bit incorrect with "..."
        while (bb.width > maxWidth && text.length > 0) {
            text = text.substring(0, text.length - 1);
            textElement.attr({"text": text});
            bb = textElement.getBBox();
        }

        // remove element from paper
        textElement.remove();

        if (text != original) {
            text = text + "...";
        }

        return text;
    }


    var x = 100, y = 90, height = 20;
    var options = {"text-anchor": "middle", "boxHeight": 150, "vertical-align": "top"};
    var options = {"boxHeight": 150, "vertical-align": "top"};
    drawMultilineText(text, x, y, 150, 100, options);
};